<template>
  <div class="home">
    <div class="swipe-box">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img style="width:100%" v-bind:src="image">
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="body">
      <div class="nav">
        <div class="one">
          <van-row type="flex" justify="space-around">
            <van-col>
              <div class="list">
                <img
                  class="img-box"
                  src="https://gw.alicdn.com/tfs/TB1g9Klbe3tHKVjSZSgXXX4QFXa-94-94.png"
                  alt
                >
                <p>积分商城</p>
              </div>
            </van-col>
            <van-col>
              <router-link to="/ActivityHome">
                <div class="list">
                  <img
                    class="img-box"
                    src="https://gw.alicdn.com/tfs/TB1kXtnOgHqK1RjSZFgXXa7JXXa-94-94.png"
                    alt
                  >
                  <p>活动资讯</p>
                </div>
              </router-link>
            </van-col>
            <van-col>
              <div class="list" @click="link(topicType[2])">
                <img
                  class="img-box"
                  src="https://gw.alicdn.com/tfs/TB1gigON9zqK1RjSZPcXXbTepXa-94-94.png"
                  alt
                >
                <p>悦读</p>
              </div>
            </van-col>
            <van-col>
              <router-link :to="{path:'/CommunityHome', query:{nameLink:'articleAdd'}}">
                <div class="list">
                  <img
                    class="img-box"
                    src="https://gw.alicdn.com/tfs/TB1P8RNOhjaK1RjSZKzXXXVwXXa-94-94.png"
                    alt
                  >
                  <p>圈子</p>
                </div>
              </router-link>
            </van-col>
            <van-col>
              <div class="list">
                <img
                  class="img-box"
                  src="https://gw.alicdn.com/tfs/TB1J8XrOXzqK1RjSZFCXXbbxVXa-94-94.png"
                  alt
                >
                <p>福利</p>
              </div>
            </van-col>
          </van-row>
        </div>
      </div>
      <div class="hot">
        <div class="post">
          <div class="title">
            <span class="hot-text">热门圈子</span>
            <span class="line"></span>
            <span style="color:#D0021B;font-size:16px;">Hot</span>
          </div>
          <div class="post-list">
            <div @click="link(item)" class="post-img" v-for="item in topicType" :key="item.id">
              <img
                src="https://gw.alicdn.com/tfs/TB1cDFeOjDpK1RjSZFrXXa78VXa-334-180.png"
                alt
                srcset
              >
              <p class="topic">#{{item.articletype_name}}#</p>
            </div>
          </div>
        </div>
        <!-- <div class="title">
                    <span class="hot-text">热门活动</span><span class="line"></span><span style="color:#D0021B;font-size:16px;">Hot</span>
                </div>
                 <div class="message-list">
                    <div class="img-list" v-for="(item, index) in dataList" :key="index" @click="openLink(item)">
                        <img class="image" :src="item.file_path" alt="">
                        <p class="massage-header one-txt-cut">{{ item.title }}</p>
                        <div class="peronNum">
                            <span class="iconfont icon-shoucang"></span>
                            <span class="icon-text">{{item.collect_nums || 0}}</span>
                            <span class="iconfont icon-xiaoxi"></span>
                            <span class="icon-text">{{item.comment_nums || 0}}</span>
                        </div>
                    </div>
        </div>-->
        <OtherItem></OtherItem>
      </div>
    </div>
  </div>
</template>
<script>
import { getListPortalTops } from "@/api/home";
import { article_listAllArticletype } from "@/api/article";
import OtherItem from "./other/other"; //导入标题组件

export default {
  name: "Home2",
  components: {
    OtherItem
  },
  data() {
    return {
      images: [
        "https://gw.alicdn.com/tfs/TB1zqdmOirpK1RjSZFhXXXSdXXa-750-376.png"
      ],
      listQuery: {
        current: 1,
        limit: 5,
        company_id: localStorage.getItem("companyId") - 0
      },
      dataList: [],
      topicType: []
    };
  },
  methods: {
    link(e) {
      this.$router.push({
        path: "/topicType",
        query: {
          id: e.id,
          name: e.articletype_name
        }
      });
    },
    async topic() {
      //获取话题
      let { data } = await article_listAllArticletype();
      if (data.status == 100) {
        this.topicType = data.data.rows;
      }
    },
    openLink(item) {
      if (item.type == "active") {
        this.$router.push({
          path: "/ActivityDetail",
          query: { id: item.id, status: item.active_status }
        });
      }
    },
    async initList() {
      let query = Object.assign({}, this.listQuery);
      let res = await getListPortalTops(query);
      let result = res.data;
      if (result.status == 100) {
        this.dataList = result.data.rows;
      }
    }
  },
  created: function() {
    setTimeout(() => {
      this.initList();
      this.topic();
    }, 1000);
  }
};
</script>
<style lang="scss" scoped>
@import "Home2";
</style>
